<template>
  <div v-loading="loading" class="components-container magicHome">
    <split-pane split="vertical" :min-percent="20" :default-percent="50" style="position:unset;">
      <template slot="paneL">
        <div style="overflow:auto;height:100%;width:100%;">
          <dealContractView ref="dealContractViewNew" />
        </div>
      </template>
      <template slot="paneR">
        <div style="overflow:auto;height:100%;width:100%;background-color: white; margin-left: 10px;">
          <dealContractView ref="dealContractViewOld" />
        </div>
      </template>
    </split-pane>
    <div class="questionCss">
      <span>
        <el-tooltip placement="top">
          <div slot="content">
            <i class="el-icon-star-on" style="color: #e6a23c;font-size: 18px;" />: {{ $t('修改内容') }}<br>
            <i class="el-icon-star-on" style="color: #8bc34a;font-size: 18px;" />: {{ $t('新增内容') }}<br>
          </div>
          <i class="el-icon-question" />
        </el-tooltip>
      </span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import dealContractView from '@/views/saas/yueyin/deal/contract/yueYinDealContractView.vue'
import { contractComparisonDifferences } from '@/api/sass/yueyin/deal/contract/yueYinDealContract.js'
export default {
  components: {
  },
  data() {
    return {
      loading: false,
      contractPage: false,
      subDataNew: undefined,
      subDataOld: undefined,
      newData: undefined,
      oldData: undefined,
      list: [{ children: [{ 'open_id': '1', 'name': '周标' }] }]
    }
  },
  watch: {
  },
  created() {
    new Vue({})
    Vue.component('dealContractView', dealContractView)
    this.$bus.$emit('async_done')
  },
  mounted() {
    this.contractPage = true
  },
  beforeDestroy() {
  },
  methods: {
    init() {
      this.loading = true
      this.subDataNew = undefined
      this.subDataOld = undefined
      console.log('对比合同数据加载!!!')
      this.$nextTick(() => {
        setTimeout(() => {
          // 新合同
          this.$refs.dealContractViewNew.changeContractBtnStatus = false
          this.$refs.dealContractViewNew.initForm(this.newData, () => {
            this.$refs.dealContractViewNew.promptLogo = 'NEW'
            // 新合同加载完毕后加载旧合同
            this.$refs.dealContractViewOld.markDifferent = true
            this.$refs.dealContractViewOld.changeContractBtnStatus = false
            this.$refs.dealContractViewOld.initForm(this.oldData, () => {
              this.$refs.dealContractViewOld.promptLogo = 'OLD'
            })
          })
        }, 1000)
      })
    },
    // 页面加载完后获取页面的数据, 这里肯定是对应的上名字的
    parentContractData(data) {
      if (this.subDataNew === undefined) {
        this.subDataNew = data
      } else {
        this.subDataOld = data
        this.comparedData()
      }
    },
    // 对比连个合同不同之处
    comparedData() {
      this.subDataNew.oldDealContract = this.subDataOld
      contractComparisonDifferences(this.subDataNew).then(response => {
        // console.log(response)
        try {
          this.$refs.dealContractViewNew.contractDifferencesMark(response.data)
          this.loading = false
        } catch (e) {
          this.loading = false
          console.log(e)
        }
      })
    }

  }

}
</script>
<style scoped>
  .components-container {
    position: absolute;
    margin: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .questionCss {
    width: 100%;
    text-align: center;
    margin-top: -30px;
    z-index: 2000;
    font-size: 20px;
    position: absolute;
  }
</style>
